<!-- 交通车-设置 -->
<template>
  <el-dialog 
    v-el-drag-dialog="{drag: true, full: false, resize: false}"
    title="换车设置" 
    :visible="true"
    :close-on-click-modal="false"
    @close="closeMd"
    custom-class="jt-car-md"
    width="500px"
  >
    <el-form 
      :model="fm.ps" 
      :ref="fm.fname" 
      :label-width="'80px'" 
      @keyup.enter.native="onSubmit"
    >
      <el-form-item 
        label="区间"
        prop="setime"
        :rules="[
          { required: true, message: '请选择日期区间', trigger: 'blur' },
        ]"
      >
        <el-date-picker
          style="width: 400px"
          v-model="fm.ps.setime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>

      <el-form-item 
        label="方式"
        prop="dateWay"
        :rules="[
          { required: true, message: '请选择日期方式', trigger: 'change' },
        ]"
      >
        <el-radio-group v-model="fm.ps.dateWay">
          <el-radio label="7">法定节假日</el-radio>
          <el-radio label="9">自定义</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item 
        v-if="fm.ps.dateWay == 9"
        label="自定义"
        prop="selfDate"
        :rules="[
          { required: true, message: '请选择自定义星期', trigger: 'blur' },
        ]"
      >
        <el-select
          v-model="fm.ps.selfDate"
          multiple
          placeholder="请选择星期"
          style="width: 400px"
        >
          <el-option
            v-for="item in fm.selfDateList"
            :key="item.val"
            :label="item.text"
            :value="item.val">
          </el-option>
        </el-select>
      </el-form-item>

      <div style="text-align: center;">
        <el-button type="info" @click="closeMd">取消</el-button>
        <el-button type="primary" :disabled="fm.sb.load" @click="onSubmit">{{fm.sb.text}}</el-button>
      </div>

      <div class="page-explain">
        <span>说明：在选择的日期区间内，设置指定的交通车日期。</span>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog';

export default {
  name: 'JtCar',
  directives: { elDragDialog },
  props: { myData: Object },
  data() { 
    return {
        fm: {
            fname: 'jtCarFm',
            sb: {load: false, text: '确定'},
            ps: {
                // 日期区间
                setime: [],
                // 方式
                dateWay: '',
                // 自定义
                selfDate: []
            },
            // 自定义日期数组
            selfDateList: [
                {val: 1, text: '星期一'},
                {val: 2, text: '星期二'},
                {val: 3, text: '星期三'},
                {val: 4, text: '星期四'},
                {val: 5, text: '星期五'},
                {val: 6, text: '星期六'},
                {val: 0, text: '星期天'},
            ],
        }
    }
  },
  methods:{
    closeMd(){// 关闭弹框
      this.$emit('myClick', {state: false});
    },
    // 表单-提交
    onSubmit(){
      let that = this, U = that.U, ps = U.scopy(that.fm.ps), sb = that.fm.sb;

      sb.load = true;
      that.$refs[that.fm.fname].validate((valid) => {
        sb.load = false;
        if (!valid) { return false; }else{
          let p = {};// 处理参数
          if(ps.setime.length > 0) {
            p.stime = ps.setime[0]+' '+that.myData.obj.stime;
            p.etime = ps.setime[1]+' '+that.myData.obj.etime;
          }
          p.dateWay = ps.dateWay == 9 ? ps.selfDate.join(',') : ps.dateWay;

          that.$emit('myClick', {state: false, obj: p});
        }
      });
    },
  },
 }
</script>

<style lang="less" scoped>
.jt-car-md{

  .el-form{
    width: 100%;
  }
}
</style>